<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见样式</title>
</head>
<style>
    /* 
    选择器 ： 选择页面当中的元素 
    div.innerStyle  : 元素名称为div,class为innerStyle的div元素 
    div#st : 
    div .innerStyle 层次选择器,查找div下面的所有元素 只要是class=innerStyle全部都在我的范围内
     */
    /* 
        元素选择器  class选择器
        混合模式 ： 层级选择器 查找的是最后那个N元素，但N元素要满足给定条件
        祖先找后 : selector1 selector2 selectorN...  
        父找子   : selector1 > selector2 > selectorN
        哥找弟   : selector1 + selector2 + selectN 
        哥找所有弟 : selector1 ~ selector2 ~ selectN
     */
    div .innerStyle{
        width:20px;height:20px;background-color: yellowgreen; 
    }

    div ~ input{
        width:120px;height:20px;background-color: red; 
    }


    /*  1: 背景图片拉伸功能 */

    .divbgContainer{
        width:100%;height:180px;
        /* 设置元素的背景颜色。 */
        background-color: rgb(145, 218, 148);
        /* 把图像设置为背景。 */
        background-image: url(./images/img_tree.png);
        /* 设置背景图像是否及如何重复。 */
        background-repeat:no-repeat;
        /* 背景图像是否固定或者随着页面的其余部分滚动。 */
        background-attachment: fixed;
        /* 设置背景图像的起始位置。 */
        background-position: right 150px;

        /* 采用组合方式编写 */
        /* background: #c87a7a url(./images/img_tree.png) no-repeat fixed center right ; */
    }

</style>
<body>
    <h1>背景的使用</h1> 
    <h2>background</h2>

    <div class="divbgContainer">

    </div>


    <h2>细化一下层级选择器</h2>
    <input type="text" value="我是div同层的">
    <input type="text"value="我是div同层的">
    <div id="containers">
        <label for="">内联样式</label>
        <div id="l1" style="width:20px;height:20px;background-color: red;"></div>
        <label for="">内部样式</label>
        
        <form action="">
            <div class="innerStyle">ss</div>
            <input class="innerStyle" type="text">
            <input class="innerStyle" type="text">
        </form>
      <input type="text" value="我是containers的小儿子,同时是l1的弟弟">
    </div>
    <input type="text" value="我是div同层的">
    <input type="text"value="我是div同层的">
   
</body>
</html>